<template>
  <div>
    <a-card class="content">
      <!-- 查询条件 start-->
      <a-row>
        <a-col :flex="1" style="margin-top: 4px;">
          <a-form :model="searchModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
                  label-align="left"
                  auto-label-width>
            <a-row :gutter="16">
              <!--设备名称-->
              <!--<a-col :span="8">-->
              <!--<a-form-item field="catalogId" :label="$t('power.energy.device.name')">-->
              <!--<a-tree-select v-model="searchModel.deviceId" :data="renderDeviceData" placeholder="全部设备" :fieldNames="{-->
              <!--key: 'id', title: 'deviceName', children: 'children'-->
              <!--}" :allow-search="true" :allow-clear="true" :filter-tree-node="filterTreeNode"-->
              <!--@clear="handleDeviceClear" @change="handleDeviceChange"></a-tree-select>-->
              <!--</a-form-item>-->
              <!--</a-col>-->

              <!--能源类型-->
              <a-col :span="8">
                <a-form-item field="stationType" :label="$t('global.energy')">
                  <a-select v-model="searchModel.stationType" :placeholder="$t('global.pleaseSelect')"
                            allow-clear>
                    <a-option :key="0" :label="'全部类型'" :value="Number(-100)"/>
                    <a-option v-for="dict in sys_station_type" :key="dict.value" :label="dict.label"
                              :value="Number(dict.value)"/>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="state" :label="$t('pv.alarm.list.eventStatus')">
                  <a-select v-model="searchModel.triggerStatus" @clear="handleTriggerStatusClear" placeholder="全部状态"
                            allow-clear>
                    <a-option key="-10" label="全部状态" value="-10"></a-option>
                    <a-option v-for="dict in sys_trigger_status" :key="dict.value" :label="dict.label"
                              :value="dict.value"></a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="time" :label="$t('pv.alarm.list.selectDate')">
                  <a-range-picker v-model="searchModel.time"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 35px" direction="vertical"/>
        <a-col :flex="'86px'" style="text-align: right">
          <a-space :size="18">
            <a-button type="primary" @click="onSearch">
              <template #icon>
                <icon-search/>
              </template>
              {{ $t('global.search') }}
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <!-- 查询条件 end-->
      <a-divider style="margin-top: 0"/>
      <!-- 表格 start-->
      <a-table row-key="id" :loading="loading" :bordered="{ wrapper: true, cell: true }" :pagination="pagination"
               :columns="(tabColumns as TableColumnData[])" :data="renderData" @page-change="onPageChange"
               @page-size-change="onPageSizeChange">
      </a-table>
      <!-- 表格 end-->
    </a-card>
    <!-- 图表 start -->
    <a-card class="general-card" style="margin-top: 16px;" :title="$t('pv.alarm.list.levelStatistics')">
      <CutomChart :options="chartLevelData" autoresize height="460px"/>
    </a-card>
    <a-card class="general-card" style="margin-top: 16px;" :title="$t('pv.alarm.list.typeStatistics')">
      <CutomChart :options="chartCategoryData" autoresize height="460px"/>
    </a-card>
    <!-- 图表 end -->
  </div>
</template>

<script lang="ts" setup>
import {computed, ref, reactive, getCurrentInstance} from "vue";
import {BasePagination} from "@/api/common";
import {TableColumnData} from "@arco-design/web-vue";
import useLoading from "@/hooks/loading";
import dayjs from "dayjs";
import {onMounted} from "vue";
import {getCategoryStaticList, getLevelStaticList, getStatisticlist} from "@/api/system/trigger";
import {handleChartData} from "@/utils/charts";
import {StationTypeEnum, listFusionGroup} from "@/api/system/device";
import {processSelectable} from "@/utils/ruoyi";

const props = defineProps({
  stationType: {
    type: Number,
    default: StationTypeEnum.power,
  },
})

//加载中
const {loading, setLoading} = useLoading(true);

//******* 这里编写动态获取下拉列表 start ******
const proxy = getCurrentInstance()?.appContext.config.globalProperties;
const {
  sys_alaram_level, sys_trigger_status, sys_station_type
} = proxy?.useDict(
    "sys_alaram_level", "sys_trigger_status", "sys_station_type"
);
//******* 这里编写动态获取下拉列表 end ******

//表格数据
const renderData = ref<any>([]);
//设备数据
const renderDeviceData = ref<any>([{
  id: 0,
  deviceSn: "0",
  selectable: true,
  isGroup: 0,
  deviceName: "全部设备",
  children: []
}]);
//报警类型数据-下拉框
const renderAlarmCategoryData = ref<any>([{
  id: 0,
  triggerName: "全部类型",
  triggerSn: "all",
}]);
//报警类型数据-下拉框-自定义字段
const alarmCategoryfieldNames = {value: 'id', label: 'triggerName'}

//表格分页配置
const pagination: any = reactive({...BasePagination()});
//报警级别统计图
const chartLevelData = ref<any>([]);
//报警类型统计图
const chartCategoryData = ref<any>([]);
const customColumns = ref<any>([]);
//设置表格列
const tabColumns = computed<TableColumnData[]>(() => customColumns.value);
var dateNow = dayjs().format("YYYY-MM-DD");
var dateBefore = dayjs().format("YYYY-MM-01")

//报警事件查询项
const searchModel = ref({
  id: 0,
  //设备名称
  deviceId: 0,
  //事件状态
  triggerStatus: '-10',
  // 选择日期
  time: [dateBefore, dateNow],
  // 能源类型
  stationType: props.stationType,
});

/**
 * 搜索
 */
const onSearch = async () => {
  await fetchData();
};

/**
 * 表格页码发生变化
 * @param val
 */
const onPageChange = async (val: number) => {
  pagination.current = val;
  await fetchData();
}

/**
 * 表格每页数量发生变化
 * @param val
 */
const onPageSizeChange = async (val: number) => {
  pagination.pageSize = val;
  await fetchData();
}

/**
 * 设备搜索
 * @param searchValue
 * @param nodeData
 */
const filterTreeNode = (searchValue: any, nodeData: any) => {
  return nodeData.deviceName.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
}


/**
 * 选择设备
 */
const handleDeviceChange = (val: any) => {
  if (searchModel.value.deviceId) {
    console.log(val)
  }
}

/**
 * 设备清空
 */
const handleDeviceClear = () => {
  searchModel.value.deviceId = 0;
}

/**
 * 事件状态清空
 */
const handleTriggerStatusClear = () => {
  searchModel.value.triggerStatus = '-10';
}

/**
 * 获取设备列表
 */
const fetchDeviceData = async () => {
  try {
    let param = {
      stationType: props.stationType,
    }
    const res = await listFusionGroup(param);
    processSelectable(res.data);
    renderDeviceData.value[0].children = res.data;
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
  }
}

/**
 * 查询数据
 */
const fetchData = async () => {
  setLoading(true);
  try {
    const res = await getStatisticlist({
      deviceId: searchModel.value.deviceId > 0 ? searchModel.value.deviceId : '',
      triggerStatus: searchModel.value.triggerStatus != '-10' ? searchModel.value.triggerStatus : '',
      // 能源类型
      stationType: searchModel.value.stationType != '-100' ? searchModel.value.stationType : '',
      params: {
        beginTime: searchModel.value.time[0],
        endTime: searchModel.value.time[1]
      },
    });
    if (res.code == 200) {
      pagination.total = res.total;
      if (res.rows && res.rows.length > 0) {
        let columns: TableColumnData[] = [];
        let data: any = [];
        res.rows.forEach((item: any, index: number) => {
          let info: any = {};
          item.forEach((cItem: any, cIndex: number) => {
            if (index == 0) {
              columns.push({
                title: cItem.key,
                dataIndex: cItem.key,
                align: cIndex <= 1 ? "left" : "center"
              })
            }
            info[cItem.key] = cItem.value
          });
          data.push(info);
        });
        customColumns.value = columns;
        renderData.value = data;
      }
    }
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
};

/**
 * 报警级别统计图
 */
const fetchLevelData = async () => {
  try {
    let res = await getLevelStaticList({});
    if (res.code == 200) {
      chartLevelData.value = handleChartData(res.data);
    } else {
      chartLevelData.value = [];
    }
  } catch (ex) {

  } finally {

  }
}

/**
 * 报警类型统计图
 */
const fetchCategoryData = async () => {
  try {
    let res = await getCategoryStaticList({});
    if (res.code == 200) {
      chartCategoryData.value = handleChartData(res.data);
    } else {
      chartCategoryData.value = [];
    }
  } catch (ex) {

  } finally {

  }
}

/**
 * 首次加载
 */
onMounted(async () => {
  fetchDeviceData();
  await fetchData();
  await fetchLevelData();
  await fetchCategoryData();
})
</script>
<style lang="less" scoped>
.row-mp-30 {
  margin-top: 30px;
  padding-right: 30px;
}

.main-chart {
  height: 400px;
  padding: 0px;
  margin: 0px;
}
</style>
